<template>
  <div>
      <div class="main">
          <div :style="{height:getWindowHeight+'px'}">
                <cube-scroll
                  ref="scrolls"
                  :data="arrComment"
                  :options="options"
                  @pulling-up="onPullingUp"
                  >
                      <div class="title_box">
                          <p>评论列表</p>
                      </div>
                      <div class="comment_box" v-for="(list,index) in arrComment" :key="index">
                          <div class="top">
                              <div class="left">
                                  <img :src="list.headimgurl" alt="">
                                  <span>{{list.nickname}}</span>
                              </div>
                              <div class="right">
                                  {{list.created_at*1000 | formatDate}}
                              </div>
                          </div>
                          <div class="conter_box">
                              <div class="">
                                  <p class="conter_txt">{{list.content}}</p>
                                  <p v-if="list.status == 0" style="color:#c3b600;">审核中..</p>
                              </div>
                              <!-- <div class="dianzan">
                                  <i class="dianzan_icon" :style="icon_good_icon"></i>
                                  <span class="dianzan_num">132</span>
                              </div> -->
                          </div>
                          <!-- <div class="huifu_box">
                              <p>可爱的小梨：真的是非常的好吃，好吃到爆炸！</p>
                          </div> -->
                      </div>
                      <p v-if="arrComment.length == 0" style="margin-top:1rem;color:ffffff;">没有更多数据了</p>
                </cube-scroll>
          </div>
      </div>
  </div>
</template>
<script>
import {formatDate} from '@/util/date.js';
export default {
    filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }
    },
    data(){
        return{
            icon_good_icon:{
                backgroundImage: "url(" + require("../../assets/icon_good@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            arrComment:[],
            commentPage:1,
            pullUpLoad: true,
            pullUpLoadThreshold: 0,
            pullUpLoadMoreTxt: '',//上拉加载更多
            pullUpLoadNoMoreTxt: '没有更多数据了喔~',
            getWindowHeight:null,
        }
    },
    methods:{
        getBusiness_comment:function(){
            let that = this;
            let poster_id = that.$route.query.poster_id;
            if(!poster_id){
                that.showClose();
            }{
                that.$axios.post("/fang/tool/get_poster_comment?page="+that.commentPage,that.$qs.stringify({
                          poster_id:poster_id,
                          access_token:that.$store.state._token01
                    }))
                    .then(function (response) {
                        let res = response.data;
                        console.log(res)
                        if(res.status == 1){
                            if(res.data.data.length > 0){
                                that.arrComment = that.arrComment.concat(res.data.data);
                                that.commentPage = parseInt(res.data.current_page) +1;
                            }else{
                                // 如果没有新数据
                                that.$refs.scrolls.forceUpdate();
                            }
                        }
                        else if (res.status == -1) {
                            that.noLogin();
                        }else{
                            console.log("出错了")
                        }
                    })
                    .catch(function (error) {
                      console.log(error);
                });
            }
        },
        showClose() {
          this.$createDialog({
            type: 'alert',
            icon: 'cubeic-back',
            showClose: true,
            title: '没找到ID',
            onClose: () => {

            }
          }).show()
        },
        onPullingUp:function(){
          this.getBusiness_comment();
        }
   },
   mounted(){
        this.getWindowHeight = document.documentElement.clientHeight || document.body.clientHeight;
   },
   metaInfo: {
     title: "评论列表"
    },
    computed: {
        options() {
          return {
            pullUpLoad: this.pullUpLoadObj,
            scrollbar: true
          }
      },
      pullUpLoadObj: function() {
        return this.pullUpLoad  ? {
          threshold: parseInt(this.pullUpLoadThreshold),
          txt: {
            more: this.pullUpLoadMoreTxt,
            noMore: this.pullUpLoadNoMoreTxt
          }
        } : false;
      }
    },
   beforeCreate:function(){

   },
   activated:function(){
       //使用keep-alive以后进入页面只会触发activated
       this.commentPage = 1;
       this.arrComment = [];
       this.getBusiness_comment();
   },
   beforeDestroy: function() {

   },
   deactivated:function(){
       //deactivated使用keep-alive以后推出页面只会触发deactivated
   }
}
</script>
<style scoped>
.main{
    padding: 0 .8rem;
    overflow: hidden;
}
.main .title_box{
    height: 1.6rem;
    display: flex;
    align-items: center;
    font-size: .56rem;
    color: #1e1e1e;
    position: relative;
}
.main .title_box::after{
    content: "";
    display: block;
    width: 2.4rem;
    height: .16rem;
    background: #0f0f0f;
    position: absolute;
    left: 0;
    bottom: 0;
}
.main .comment_box{
    margin-top: .78rem;
    padding-bottom: .8rem;
    border-bottom: .04rem solid #e4e4e4;
}
.main .comment_box .top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.main .comment_box .top .left{
    display: flex;
    justify-content: center;
    align-items: center;
}
.main .comment_box .top .left > img{
    width: .8rem;
    height: .8rem;
    background: #4e4e4e;
    border-radius: 50%;
}
.main .comment_box .top .left > span{
    font-size: .56rem;
    color: #868686;
    margin-left: .4rem;
}
.main .comment_box .top .right{
    font-size: .48rem;
    color: #6c6c6c;
}
.main .comment_box .conter_box{
    margin-top: .8rem;
    padding-left: .82rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.main .comment_box .conter_box .conter_txt{
    font-size: .56rem;
    color: #090909;
    line-height: 1rem;
    text-align: left;
    word-wrap:break-word;
    word-break:break-all;
}
.main .comment_box .conter_box .dianzan{
    width: 2.58rem;
    min-width: 1.5rem;
}
.main .comment_box .conter_box .dianzan .dianzan_icon{
    display: inline-block;
    width: .56rem;
    height: .56rem;
}
.main .comment_box .conter_box .dianzan .dianzan_num{
    display: inline-block;
    font-size: .48rem;
    color: #6c6c6c;
}
.main .comment_box .huifu_box{
    margin-top: .7rem;
    border:.04rem solid #e4e4e4;
    padding: .28rem;
    line-height: 1rem;
    text-align: left;
}
</style>
